<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
		<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
		<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

	</head>
	<body>
		<div id="demo">
			<button @click="show=!show">
				开关
			</button>
			<transition
			v-on:before-enter="beforeEnter"
			v-on:enter="enter"
			v-on:leave="leave"
			v-on:css="false"
			>
				<p v-if="show">Demo</p>
				
			</transition>
			
		</div>	
		<script type="text/javascript">
			 //自定义过度class 可以结合第三方css 库使用
			 /**
			  * 我们可以通过以下 attribute 来自定义过渡类名：

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，
如 Animate.css 结合使用十分有用。
			  */
			 let app=new Vue({
				 el:'#demo',
				 data:{
					 show:true,
				 },
				 methods:{
					 beforeEnter: function (el) {
					       el.style.opacity = 0
					       el.style.transformOrigin = 'left'
					     },
					     enter: function (el, done) {
					       Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
					       Velocity(el, { fontSize: '1em' }, { complete: done })
					     },
					     leave: function (el, done) {
					       Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
					       Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
					       Velocity(el, {
					         rotateZ: '45deg',
					         translateY: '30px',
					         translateX: '30px',
					         opacity: 0
					       }, { complete: done })
					     }
				 }
			 })
		</script>	
		<style>
	</body>
</html>
